组件化基础
MVVM(数据驱动视图，vue通过MVVM模式，raact通过setState)
传统组件，只是静态渲染，更新还要依赖于操作DOM


vue响应式
核心API：Object.defineProperty
vue3使用proxy,但proxy兼容性不好，且无法polyfill

vue2响应式原理:参考文件：./vue实现响应式的原理.md
vue3响应式原理:参考文件：./vue3实现响应式的原理.md


虚拟DOM与diff算法
 DOM操作非常耗费性能
 以前用jquery操作DOM，可以自行控制DOM操作的时机，手动调整
 vue和react是数据驱动视图，通过diff算法来更新视图，减少DOM操作
用js模拟dom结构
{
  tag: 'div',
  props: {
    className: 'container',
    id:'app',
    style:'font-size:20px'
  },
  children: [
    'hello world',
    {
      tag: 'p',
      children: 'hello vue'
    }
  ]
}
新旧vnode对比，得出最小的更新范围，最后更新dom



diff算法
只比较同一层级，不跨级比较
tag不相同，则直接删掉重建，不再深度比较
tag和key两者都相同，则认为是相同节点，不再深度比较


vue组件如何渲染和更新
解析模板为render函数
触发响应式，监听data属性getter setter
执行render函数，生成vnode,patch(elem,vnode)
